<template>
	<view class="jingxuan">
		<!-- 导航栏 -->
		<view class="jing-nav">
			<view class="nav-left">
				<view class="gril" :class="{active:index == 0}" @click="navIndex(0)">女生</view>
				<view class="boy" :class="{active:index == 1}" @click="navIndex(1)">男生</view>
			</view>
			<view class="nav-right">
				<image src="/static/sift/sec.png" mode="" @click="search"></image>
			</view>
		</view>
		<view class="fengge"></view>
		<!-- 轮播图 -->
		<swiper class="swiper" autoplay="true">
			<swiper-item class="swiper-item">
				<image src="/static/sift/banner.png" mode=""></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="/static/sift/banner.png" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 卡片页 -->
		<view class="card">
			<view class="card-item card-left" @click="toList('分类')">
				<view class="card-title">分类<image src="/static/sift/shu.png"></image></view>
				<view>古言·现言</view>
			</view>
			<view class="card-item card-center"  @click="toList('新书')">
				<view class="card-title">新书</view>
				<view>持续上新</view>
			</view>
			<view class="card-item card-right" @click="toList('完结')">
				<view class="card-title">完结</view>
				<view>一次看到爽</view>
			</view>
		</view>
		<!-- 畅销精选 -->
		<view class="boom">
			<!-- 标题 -->
			<view class="boom-title">
				<view class="title">{{titleOne}}</view>
				<view>更多&gt;</view>
			</view>
			<scroll-view class="scroll-view"  scroll-x="true">
				<view class="boom-item">
					<view class="shujia" v-for="(item,index) in list" :key="index" @click="toDetail">
						<view class="list-img">
							<image src="/static/sift/item1.png" mode=""></image>
						</view>
						<view class="list-title">
							{{item.title}}
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="like">
			<!-- 标题 -->
			<view class="like-title">
				<view>{{titleTwo}}</view>
			</view>
			<!-- 内容 -->
			<datu-card :shulist="likeList"></datu-card>
		</view>
	</view>
</template>

<script setup lang="ts">
import datuCard from '@/components/datu-card/datu-card.vue'
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import itemImg from '@/static/sift/item1.png'
/**
 * 男女
 */
const index = ref<number>(0)
const titleOne = ref<string>('畅销精选')
const titleTwo = ref<string>('猜你喜欢')

const list = ref([
    {
        imgSrc: itemImg,
        title: '开局快递奖励顶级跑车',
        geng: "更新至1288章",
        author: "月名 著",
        show: false,
        desc: `叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
    },
    {
        imgSrc: itemImg,
        title: '开着拖拉机去蹦迪',
        geng: "更新至1288章",
        author: "月名 著",
        show: false,
        desc: `叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
    },
    {
        imgSrc: itemImg,
        title: '开着拖拉机去蹦迪',
        geng: "更新至1288章",
        author: "月名 著",
        show: false,
        desc: `叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
    },
    {
        imgSrc: itemImg,
        title: '开着拖拉机去蹦迪',
        geng: "更新至1288章",
        author: "月名 著",
        show: false,
        desc: `叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
    }
])

const likeList = ref([
{
						imgSrc:'/static/temp/item1.png',
						title:'开局快递奖励顶级跑车',
						geng:"更新至1288章",
						author:"月名 著",
						show:false,
						desc:`叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
					},
					{
						imgSrc:'/static/temp/item2.png',
						title:'开着拖拉机去蹦迪',
						geng:"更新至1288章",
						author:"月名 著",
						show:false,
						desc:`叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
					}
])

/**
 * 去详情
 */
const toDetail = () =>{
	uni.navigateTo({url: `/pages/bookdetail/index`})

}
/**
 * 切换男女
 */
const navIndex = (e:number) :void =>{
    index.value = e
}
/**
 * 搜索
 */
const search = ():void =>{

}
/**
 * 去不同的页面
 */
const toList = (type:string) =>{

}
onLoad((Options :any) :void =>{
	if( Options?.index){
		index.value = Options.index
	}
    

})
</script>
<style scoped lang="scss">
.jingxuan{
	.fengge{
		height: 158rpx;
	}
	.jing-nav{
		display: flex;
		justify-content: space-between;
		padding: 87rpx 40rpx 0;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		height: 158rpx;
		.nav-left{
			display: flex;
			font-size: 38rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #1C1C1C;
			.boy{
				margin-left: 50rpx;
			}
			.active{
				font-size: 46rpx;
				font-weight: bold;
				color: #E60606;
			}
		}
		.nav-right{
			image{
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
	.swiper{
		width: 750rpx;
		height: 262rpx;
		margin-top: 35rpx;
		.swiper-item{
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.card{
		display: flex;
		justify-content: space-around;
		margin-top: 36rpx;
		.card-item{
			view{
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #939393;
				line-height: 50rpx;
				text-align: center;
			}
			.card-title{
				font-size: 34rpx;
				color: #000000;
				font-weight: bold;
				line-height: 50rpx;
				padding-top: 20rpx;
				image{
					width: 34rpx;
					height: 31rpx;
				}
			}
		}
		.card-left{
			width: 188rpx;
			height: 122rpx;
			background: #FFCDFB;
			border-radius: 4rpx;
		}
		.card-center{
			width: 245rpx;
			height: 122rpx;
			background: #FFEBEC;
			border-radius: 10rpx;
		}
		.card-right{
			width: 245rpx;
			height: 122rpx;
			background: #FBF7EC;
			border-radius: 10rpx;
		}
	}
	.boom{
		// margin-top: 30rpx;
		padding: 52rpx 32rpx 0;
		.boom-title{
			display: flex;
			justify-content: space-between;
			view{
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #111111;
				line-height: 43rpx;
			}
			.title{
				font-size: 36rpx;
				color: #000000;
				line-height: 50rpx;
			}
		}
		.scroll-view{
			height: 380rpx;
			width: 100%;
			.boom-item{
			display:flex;
			margin-top: 42rpx;
			width: 100%;
			.shujia{
				margin-left: 20rpx;
				margin-bottom: 16rpx;
				.list-img{
					width: 206rpx;
					height: 290rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.list-title{
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
					width:206rpx; 
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis; 
				}
			}
		}
		}
		
	}
	.like{
		padding: 0 32rpx;
		margin-top: 20rpx;
		.like-title{
			font-size: 34rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #000000;
			line-height: 50rpx;
		}
	}
}
</style>